<template>
  <div class="notepad">
    <div class="title">
      记事本
      <BackIcon @back-before="backBefore" />
    </div>
    <div
      ref="textRef"
      class="content"
      contenteditable
      @blur="saveContent"
    ></div>
  </div>
</template>
<script setup lang="ts">
import BackIcon from '@renderer/components/BackIcon.vue';
import { onMounted, ref } from 'vue';

const text = ref('');
const textRef = ref();
const saveContent = () => {
  text.value = textRef.value.innerText;
  localStorage.setItem('notepad', text.value);
};
const backBefore = () => {
  saveContent();
};

onMounted(() => {
  text.value = localStorage.getItem('notepad') || '';
  textRef.value.innerText = text.value;
});
</script>
<style scoped lang="less">
.notepad {
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
  .title {
    margin: 10px 0;
    position: relative;
    -webkit-app-region: drag;
  }
  .content {
    padding: 10px;
    box-sizing: border-box;
    flex: 1;
    outline: none;
    box-shadow: 0 0 10px rgba(255, 255, 255, 1) inset;
  }
}
</style>
